<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体大小</title>

    <style>
        /*pc端浏览器默认字体大小是16px 最小支持12px*/
        .one{
            font-size: 14px;
        }

        /*  em 相对单位
        em单位没有具体的大小，它的大小取决于父级的文本大小，
        如果没有父级文本，那就取决于body标签的大小     */
        .em{
            /*此时这里的像素大小就取决于body的大小，也就是1em=16px ，2em=32px 依次类推*/
            font-size:2em;
        }



        /*在 .f 和 .qtem 的基础上再嵌套一个.other  */
        .other{
            /*此时 .other是 .f的父类，而 .f 是.qtem 的父类，换句话将，.other 是 .qtem 的爷爷类，那么就取决于最外层的爷爷类*/
            /*也就是说1em = 15px*/
            font-size: 14px;
        }


        /*此时 这里只有两个元素产生的嵌套   .f 和 .qtem   */
        .f{
            font-size: 15px;
        }


        .qtem{
            /*此时这里的像素大小就取决于它的父类(class为f的元素)的大小了，该父类的大小是14px，那么这里的1em=14px，2em=28px*/
            font-size: 1em;
        }

        .ex{
            font-size: 1ex;
        }

        .rem{
            /*相当于根元素，根元素的默认是16px ，那么此时这里1rem=16px*/
            font-size: 1rem;
        }

        html{
            /*设置根元素 62.5% 相当于 10px*/
            font-size: 62.5%;
        }

        body{
            font-size: 1.8rem;
        }

        .rem_other{
            font-size: 20px;
        }
        .r_f{
            font-size: 30px;
        }

        .qt_rem{
            /*此时由于根元素 html 设置了字体大小为62.5%(相当于10px) ，那么此时这里的1rem = 10px ，而这里的1.8rem=18px
                它不像em一样，受父类元素影响，只受根元素影响
            */
            font-size: 1.8rem;
        }
        h1{
            /*此时 2.4rem 为24px*/
            font-size: 2.4rem;
        }


        .bfb{
            /*百分比像素的具体值 是 根据body的大小 而上面根元素设置的是 18px ,那么这里的100% 是18px*/
            font-size: 100%;
        }





    </style>


</head>
<body>

    <!--    测试px-->
    <div class="one">
        我是div标签里的内容x
    </div>


    <!--测试em-->
    <div class="em">我是测试em单位的内容x</div>
    <div class="other">
        <div class="f">
            <div class="qtem">
                我是嵌套的EM内容x
            </div>
        </div>
    </div>


    <!--    测试ex  1em = 2ex -->
    <div class="ex">我是相对于x字符的大小</div>


    <!--    测试rem-->
    <div class="rem">我是相当于根元素的rem</div>
    <div class="rem_other">
        <div class="r_f">
            <div class="qt_rem">
                我是嵌套rem
            </div>
        </div>
    </div>
    <h1>我是h1标签</h1>

    <div class="bfb">百分比像素</div>


</body>
</html>